<template>
  <div class="intro-container" element-loading-background="transparent" v-loading="loading">
    <el-scrollbar>
      <el-image :src="data" fit="cover" />
      <!-- <el-image :src="data" fit="cover" @click="handleP(data)" /> -->
      <!-- <img src="@img/ztxx/jianjie.png" alt="" /> -->
      <!-- <el-image :src="data" fit="scale-down" /> -->
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getShiCJSByMarket } from "@/apis/subjectInfo";
import { ref } from "vue";
const data = ref();
const loading = ref(false);
const getInfo = () => {
  loading.value = true;
  getShiCJSByMarket().then(res => {
    data.value = res.data[0].imgList[0];
    loading.value = false;
  });
};
getInfo();
const handleP = data => {
  showImagePreview({
    images: [data],
    closeable: true
  });
};
</script>

<style lang="scss" scoped>
.intro-container {
  height: 100%;
  overflow: hidden;
  position: relative;
  .el-scrollbar{
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
::v-deep .el-image {
  width: 100%;
}
</style>
